<template>
  <div class="kh-container">
    <errorTop/>
    <div class="kh-login">
      <div class="kh-login-wrap">
        <div class="kh-login-body">
          <div class="kh-login-top">
            <router-link to="/"></router-link>
          </div>

          <div class="kh-login-main">
            <input type="text" id="user" placeholder="账号">
            <input type="text" id="pwd" placeholder="密码">
            <a href="javascript:;" id="loginBtn" class="kh-login-btn">登录</a>
            <input type="checkbox" id="agree">
            <label class="kh-checkbox" for="agree">下次自动登陆</label>
          </div>

          <div class="kh-login-bottom">
            <a href="javascript:;">扫描二维码登陆</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import errorTop from '@/components/common/errorTop'
  export default {
    name: "login",
    components: {
      errorTop
    }
  }
</script>

<style lang="scss" scoped>
  .kh-container {
    /*width: 100%;*/
    /*height: 100%;*/
  }

  .kh-login {
    width: 100vw;
    height: 100vh;
    background-image:  url("../../assets/blog/login-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .kh-login-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .kh-login-body {
    position: relative;
    width: 400px;
    height: 470px;
    background-image: url("../../assets/blog/login-rhomb.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;

    .kh-login-top {
      text-align: center;

      a {
        display: inline-block;
        width: 128px;
        height: 58px;
        margin-top: 46px;
        background-image: url("../../assets/blog/logo.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .kh-login-bottom {
      text-align: center;

      a {
        font-size: 14px;
        color: #000;
        text-decoration: underline;
        text-indent: 2px;
        letter-spacing: 2px;
        display: inline-block;
        transition: all .3s;

        &:hover {
          color: #20d2ad;
        }
      }
    }
  }

  .kh-login-main {
    margin: 0 auto;
    padding: 20px 40px;
    box-sizing: border-box;

    input {
      width: 100%;
      height: 40px;
      border-radius: 22px;
      overflow: hidden;
      outline: 0;
      border: hidden;
      margin-bottom: 26px;
      padding: 0 22px;
      background-color: #FFF;
    }

    .kh-login-btn {
      color: #FFF;
      outline: 0;
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-radius: 22px;
      margin-bottom: 26px;
      text-align: center;
      text-indent: 10px;
      letter-spacing: 10px;
      background-color: #1fd1ae;

      &:hover {
        box-shadow: 0 0 16px #1fd1ae;
      }
    }
  }


  // checkbox - layout
  input[type='checkbox'] {
    display: none;
  }

  .kh-checkbox {
    font-size: 14px;
    padding-left: 20px;
    position: relative;
    cursor: pointer;

    &:before {
      content: '';
      position: absolute;
      top: 1px;
      left: 0;
      width: 14px;
      height: 14px;
      border: 1px solid #FFF;
      border-radius: 2px;
    }

    &:after {
      content: '';
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      width: 16px;
      height: 14px;
      background-image: url("../../assets/blog/yes.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  input[type="checkbox"]:checked+label:after{
    display: block;
  }

  input[type="checkbox"]:checked+label{
    color: #1fd1ae;
  }
</style>
